<template>
	<view class="homePage">
		<view class="search">
			<u-search placeholder="请输入搜索关键词2" :show-action="false" disabled @click="ToSearch">
			</u-search>
		</view>
		<view class="Lunbo">
			<view class="wrap">
				<u-swiper :list="list" height='400'></u-swiper>
			</view>
			<view class="box1">
				<view class="fiveBox">

					<view class="imgbox" v-for="(item,index) in textArr">
						<view>
							<image :src="item.icon_url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>


				</view>
			</view>
			<!-- {{list}} -->
		</view>


		<view class="brand">
			<h1>品牌制造商直供</h1>
			<view class="brand-bottom" v-for="(item,index) in brandList" :key="item.id" @click="toBrand(item.id)">
				<image :src="item.pic_url" mode="widthFix"></image>
				<view class="bottom-txt">
					<text>{{item.name}}</text><br>
					<text>￥ {{item.floor_price
.toFixed(2)}}元</text>
				</view>
			</view>
		</view>


		<DayNew :newlist="newGoodsList"></DayNew>


		<!-- 人气推存 -->
		<view class="Recommend">
			<view class="Recommend-title">人气推荐</view>
			<view class="Recommend-box" v-for="item in hotGoodsList" :key="item.id">
				<image :src="item.list_pic_url" mode=""></image>
				<view class="Recommend-right">
					<view class="Recommend-goods">{{item.name}}</view>
					<view class="Recommend-text">{{item.goods_brief}}</view>
					<view class="Recommend-price">¥{{item.retail_price.toFixed(2)}}元</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {

				newGoodsList: [],

				// textArr: ['居家', '餐厨', '配件', '饮食', '志趣'],
				textArr: [],
				list: [
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// },
				],


				brandList: [],


				// 人气推荐
				hotGoodsList: [],
			}

		},

		onLoad() {
			this.$request({
				url: '/index/index',


				method: "GET",
				successCb: res => {
					let {
						brandList,
						banner,
						channel,
						newGoodsList
					} = res
					console.log(channel);
					// console.log(banner);
					this.brandList = brandList
					this.newGoodsList = newGoodsList
					this.textArr = channel
					this.list = banner.map((e) => {
						return {
							image: e.image_url,
							title: e.content
						}
					})
				}


			})
		},

		onShow() {
			this.getData()
		},

		methods: {
			ToSearch() {
				// console.log(1);
				uni.navigateTo({
					url: "../search/search"
				})
			},

			toBrand(id) {
				uni.navigateTo({
					url: `/pages/brand/brand?id=${id}`
				})
			},
			// 请求数据
			getData() {
				this.$request({
					url: '/index/index',
					successCb: res => {
						// console.log(res);
						this.hotGoodsList = res.hotGoodsList
						console.log(this.hotGoodsList);
						console.log(res);
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.homePage {
		.search {
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-family: '楷体';
		}

		.brand {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 10rpx;

			h1 {
				font-size: 40rpx;
				font-weight: 500;
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}

			.brand-bottom {
				width: 49%;

				position: relative;

				image {
					width: 100%;
				}

				.bottom-txt {
					position: absolute;
					top: 10rpx;
					left: 20rpx;
					box-sizing: border-box;

					text:nth-child(1) {
						color: #000;
						font-size: 24rpx;
						line-height: 40rpx;
					}

					text:nth-child(3) {
						color: #8b0000;
						font-size: 24rpx;
						line-height: 70rpx;
					}
				}
			}
		}
	}




	.Lunbo {

		// margin-bottom: 50px;
		.box1 {

			.fiveBox {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 750rpx;
				height: 150rpx;
				// background-color: red;
			}

			.imgbox {
				image {
					display: flex;
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}

	.wrap {
		// padding: 40rpx;
	}

	// 人气推荐
	.Recommend {
		width: 100%;
		height: 772rpx;

		.Recommend-title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 48rpx;
			font-weight: 500;
			text-align: center;
		}

		.Recommend-box {
			width: 100%;
			height: 208rpx;
			padding: 16rpx 32rpx;
			margin-top: 16rpx;
			background-color: #fafafa;
			display: flex;

			image {
				width: 176rpx;
				height: 176rpx;
			}

			.Recommend-right {
				margin: 10rpx 20rpx;

				.Recommend-goods {
					font-size: 35rpx;
					font-weight: 500;
					padding-bottom: 20rpx;
				}

				.Recommend-text {
					padding-bottom: 20rpx;
					font-size: 16rpx;
				}

				.Recommend-price {
					font-size: 16rpx;
					color: #870007;
				}
			}
		}
	}
</style>
